
<%@page import="dao.DAOFactory"%>
<%@page import="entities.ProductCategories"%>
<%@page import="java.util.LinkedList"%>
<%@page import="dao.DAOFactory"%>
<%@page import="java.util.LinkedList"%>
<%@page import="dao.ProductCatDAO"%>
<%-- 
    Document   : main
    Created on : Mar 15, 2012, 6:22:24 PM
    Author     : theworldiwant
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="security.jsp" %>
<!DOCTYPE html>
<html xmlns ="http://www.w3.org/1999/xhtml">
    <head>
       <title>The BookShelf</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link href ="style4.css" rel ="stylesheet" type ="text/css" />
        <script>
            function show(b){
                if(b==true)
                    document.getElementById("hidden").style.visibility="visible";
                else
                    document.getElementById("hidden").style.visibility="hidden";
                    
            }
            
        </script>
    </head>
    <body>
        <div id="wrapper" class ="wrapper">
            <div id="inner" class="inner">
                <div id="header" class="header">
                      <img class="bg" src ="images/logoBg.png"></img>
                      <img class ="logo" src ="images/logo2.png"></img>
                      <form class="nothing" name="SearchForm" action="Search" method="GET"> 
                            <input class="searchBox" name="keyword" value="" class ="text" type="text"/> 
                            <input class="magnify" src="images/search.png" type="image" onclick=""/>
                      </form>
                      <div id="nav" class="nav">
                          <a class="link" href="">My Cart</a>
                          <a class="link" href="">Explore</a>
                            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                          <a class="link" href="">Recommendations</a>
                          <a class="link" href="">My Account</a>
                          <a class="link" href="">Log Out</a>
                            <input type="image" onmouseover="show(true)" class="explore"  src="images/explore.png"/>
                         
                      </div>
                </div>
                
                     <div class="hidden" id="hidden"  onmouseover="show(true)" onmouseout="show(false)">
                         <img src="images/hiddenPanel.png" class="hiddenP"/>
                         <a href=""><img class="explore2" src="images/explore.png"/>
                         </a>
                         <div class="hiddenExp" id="hiddenExp">
                            <a class="link" href="http://www.we.com">Best Sellers</a>
                            
                            <a class="link" href="http://www.we.com">New Products</a>
                            <a class="link" href="http://www.we.com">Recent Searches</a>
                        </div>
                     </div>
                
                <div id="top" class="top"> 
                     <div class="inner">
                         <img src="images/topShelf2.png" class="topShelf"/>
                         <div class="top1">
                             <h3>Star Wars Trilogy (Widescreen Edition)</h3>
                            <img src="images/photo_1.jpg" alt="photo 1" title="Star Wars" class="no1" height="120" width="120" />
                         </div>
                         <div class="top2">
                                <h3>Batman - The Animated Series </h3>
                                <img title ="Batman" src="images/photo_4.jpg" alt="photo 4" class="left" height="120" width="120" />

                         </div>
                         <div class="top3">
                                <h3>Harry Potter and the Prisoner of Azkaban </h3>
                                <img src="images/photo_2.jpg" alt="photo 2" class="left" height="120" width="120"/>

                         </div>
                        <div class="top4">
                                <h3 class="h3top4">The Matrix Reloaded 2(Full Screen Edition)</h3>
                                <img title="Matrix" src="images/photo_6.jpg" alt="photo 6" class="left" height="120" width="120" />

                         </div>
                         
                        <div class="top5">
                                <h3>The Matrix Reloaded 2(Full Screen Edition)</h3>
                                <img title="Matrix2" src="images/photo_6.jpg" alt="photo 6" class="left" height="120" width="120" />

                         </div>
                     
                     </div>
                    
                </div><!--end of body-->
                
                <!--end of header-->
                <div id="profile" class="profile">
                     <img  src="images/curUser.png" />
                   <input class="edit" type="image" src="images/edit.png"/>
                     
                     <img class="profPic" title="Matrix2" class="img"src="images/photo_6.jpg" alt="photo 6" height="130" width="130" />
                     <div class="proftxt"><br>
                     Name       :   me<br><br>
                     Age        :   18<br><br>
                     Gender     :   F<br><br>
                     Location   :   ph<br><br>
                     </div>
                </div>
                <div id ="genre" class ="genre">
                    <img src="images/genre.png"/>
                    <dl id="browse" class="browseDiv">
                        <dt><h3 class="genreH3">Genre</h3></dt>
                            <%
                        DAOFactory myDAOFactory = DAOFactory.getInstance(DAOFactory.MYSQL);
                        ProductCatDAO c1 = myDAOFactory.createProdCatDAO();
                        LinkedList<ProductCategories> list=c1.arrangeAlp();
                        for(ProductCategories pc: list){
            
                        %>
                            <dd><a href="#"><%out.print(pc.getName());%></a></dd>
                       <%}%>   
                           
                    </dl>
                </div>
                <div id="body" class="bodyDiv">
                    <div id="upperLeft" class="upperLeft">
                        <div class="titleGenre">
                           Action
                        </div>
                        <div class="topLeft">
                            
                            <div class="shelfTitle">
                                The Matrix Reloaded 2(Full Screen Edition)</h3>
                            </div>
                            <img title="Matrix2" class="img"src="images/photo_6.jpg" alt="photo 6" height="100" width="100" />
                        </div>
                        <div class="topRight">
                           
                            <div class="shelfTitle">
                                The Matrix Reloaded 2(Full Screen Edition)</h3>
                            </div>
                             <img title="Matrix2" class="img"src="images/photo_6.jpg" alt="photo 6" height="100" width="100" />
                        
                        </div>
                        <div class="bottomLeft">
                            
                            <div class="shelfTitle">
                                The Matrix Reloaded 2(Full Screen Edition)</h3>
                            </div>
                             <img title="Matrix2" class="img"src="images/photo_6.jpg" alt="photo 6" height="100" width="100" />
                        
                        </div>
                        <div class="bottomRight">
                            <div class="shelfTitle">
                                The Matrix Reloaded 2(Full Screen Edition)</h3>
                            </div>
                             <img title="Matrix2" class="img"src="images/photo_6.jpg" alt="photo 6" height="100" width="100" />
                        </div>
                    </div>
                    <div id="upperRight" class="upperRight">
                        <div class="titleGenre">
                           Adventure
                        </div>
                         <div class="topLeft">
                            
                            <div class="shelfTitle">
                                The Matrix Reloaded 2(Full Screen Edition)</h3>
                            </div>
                            <img title="Matrix2" class="img"src="images/photo_6.jpg" alt="photo 6" height="100" width="100" />
                        </div>
                        <div class="topRight">
                           
                            <div class="shelfTitle">
                                The Matrix Reloaded 2(Full Screen Edition)</h3>
                            </div>
                             <img title="Matrix2" class="img"src="images/photo_6.jpg" alt="photo 6" height="100" width="100" />
                        
                        </div>
                        <div class="bottomLeft">
                            
                            <div class="shelfTitle">
                                The Matrix Reloaded 2(Full Screen Edition)</h3>
                            </div>
                             <img title="Matrix2" class="img"src="images/photo_6.jpg" alt="photo 6" height="100" width="100" />
                        
                        </div>
                        <div class="bottomRight">
                            <div class="shelfTitle">
                                The Matrix Reloaded 2(Full Screen Edition)</h3>
                            </div>
                             <img title="Matrix2" class="img"src="images/photo_6.jpg" alt="photo 6" height="100" width="100" />
                        </div>
                    </div>
                    <div id="lowerLeft" class="lowerLeft">
                        
                    </div>
                    <div id="lowerRight" class="lowerRight">
                        
                    </div>
                    <div id="paging" class="paging">
                        <input class="left" src="images/left.png" type="image"/>
                        <input class="right" src="images/right.png" type="image"/>
                    
                    </div>
                </div>
                
                <!--end of body-->
                
                </div><!--end of inner-->
                
       </div>
        
        <div id="credits" class="credits">
            <img src="images/credits.png"/>
            
        </div>
       
    </body>
</html>
